﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <div class="flex-row padding-10">
            <span style="color: #000; align-self: center;">{{oneday}}</span>
            <div class="flex-row-fill" style="text-align:right;">
                <el-button icon="el-icon-arrow-left" size="mini" v-on:click="lastMonth"></el-button>
                <el-date-picker v-model="query.date" size="mini" type="month" style="width: 90px; margin: 0 5px; padding-right:0;" value-format="yyyy-MM" format="yyyy-MM" :clearable="false"
                                placeholder="选择月" :picker-options="pickerOptions"></el-date-picker>
                <el-button size="mini" icon="el-icon-arrow-right" v-on:click="nextMonth"></el-button>
                <el-button size="mini" icon="el-icon-plus" v-on:click="openEdit(null,0)" title="添加日程"></el-button>
            </div>
        </div>
        <el-calendar class="calendar" v-model="query.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            <template slot="dateCell"
                      slot-scope="{date, data}">
                <div class="w100 text-center" style="position:relative;">
                    <div class="padding-tb-4">
                        {{ data.day.split('-').slice(2).join('-') }}
                    </div>
                    @*{{ data.isSelected ? '✔️' : ''}}*@
                    @*<div v-if="list.find(function (item) { return item.schDate== data.day })" style="display: flex; position: absolute; font-size: 12px !important; color: #f37b1d !important; right: 0px; top:0;">
                        程
                    </div>*@
                    <div v-for="item in list" v-if="item.schDate== data.day" style="color: #f37b1d; font-size: 12px ">
                        <i class="el-icon-warning"></i><span class="margin-left-4">{{item.schTitle}}</span>
                    </div>
                </div>
            </template>
        </el-calendar>
        <el-dialog :visible.sync="show" :close-on-click-modal="false" :destroy-on-close="true" width="400px" top="30vh" :append-to-body="true">
            <component is="style" />
            <template #title>
                <div>
                    {{obj.optType==0?'新增':'编辑'}}日程
                </div>
            </template>
            <el-form :model="obj" ref="form" label-width="60px" size="small" :rules="rules" v-on:submit.native.prevent>
                <el-form-item label="标题" prop="schTitle">
                    <el-input v-model="obj.schTitle" placeholder="限64字以内" size="small" clearable style="width:100%;" maxlength="64" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="schDate">
                    <el-date-picker v-model="obj.schDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false"
                                    type="date"
                                    placeholder="选择日期" style="width:100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                    <el-input v-model="obj.schMark" placeholder="请输入...." type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" maxlength="400" show-word-limit size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" v-on:click="show=false">关 闭</el-button>
                <el-button type="primary" size="small" v-on:click="submit">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: '50102',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    query: { date: hxt.dateFormat('yyyy-MM-dd'), pageIndex: 1, pageSize: 100, rowCount: 0 },
                    oneday: hxt.dateFormat('yyyy 年 M 月 d 日', new Date()),
                    nextdisabled: false,
                    pickerOptions: {
                        disabledDate: function (time) {
                            return time.getTime() > Date.now();
                        }
                    },
                    list: [],
                    oldData: {obj:""},
                    obj: { openId: 0, optType: 0, schId: 0, schTitle: '', schDate: '', schMark: '' },
                    show: false,    
                    rules: {
                        schTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                        schDate: [{ required: true, message: '请选择日期', trigger: 'blur' }]
                    }
                }
            },
            computed: {
                
            },
            watch: {
                'query.date': function (newVal, oldVal) {
                    var _this = this;
                    _this.oneday = hxt.dateFormat('yyyy 年 M 月 d 日', newVal);
                },
            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + "pc/scheduleList",
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg);
                            _this.list = res.data.list;
                        }
                    });
                },
                lastMonth: function () {
                    var _this = this;
                    _this.query.date = hxt.dateFormat('yyyy-MM', hxt.dateAdd('M', -1, _this.query.date));
                    _this.query.beginTime = hxt.dateConfig(hxt.dateAdd('M', -1, _this.query.date)).monthBegin;
                    _this.query.endTime = hxt.dateConfig(hxt.dateAdd('M', 1, _this.query.date)).monthEnd;
                    _this.loadList();
                },
                nextMonth: function () {
                    var _this = this;
                    _this.query.date = hxt.dateFormat('yyyy-MM', hxt.dateAdd('M', 1, _this.query.date));
                    _this.query.beginTime = hxt.dateConfig(hxt.dateAdd('M', -1, _this.query.date)).monthBegin;
                    _this.query.endTime = hxt.dateConfig(hxt.dateAdd('M', 1, _this.query.date)).monthEnd;
                    _this.loadList();
                },
                findPrevDate: function (day) {
                    var today = hxt.dateFormat('yyyy-MM-dd');
                    return day > today
                },
                openEdit: function (d, flag) {//0新增 1修改 2删除 3启用/停用
                    var _this = this, obj = { openId: _this.optor.openId, optType: flag, schId: 0, schTitle: '', schDate: hxt.dateFormat('yyyy-MM-dd', _this.query.date), schMark: '' };
                    if (flag == 0) {
                        _this.obj = obj;
                        _this.show = true;
                        return;
                    };
                    if (flag == 1) {
                        _this.form = $.extend(obj, d.row);
                        _this.oldData.form = JSON.stringify(_this.form);
                        _this.show = true;
                        
                        return;
                    };
                },
                submit: function () {
                    var _this = this;
                    hxt.validateElForm(_this, 'form', function () {
                        if (JSON.stringify(_this.obj) == _this.oldData.obj) return hxt.msg("未做任何更改");
                        hxt.confirm("确定保存？", function () {
                            hxt.post({
                                url: hxt.config.link + "pc/scheduleSave",
                                data: _this.obj,
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                    hxt.success('保存成功');
                                    if (_this.obj.optType == 0) {
                                        _this.list.push(res.data);
                                    }
                                    else if (_this.obj.optType == 1) {
                                        var g = _this.list.find(function (item) {
                                            return item.schId == _this.obj.schId;
                                        });
                                        if (g) $.extend(g, res.data);
                                    };
                                    _this.show = false;
                                }
                            });
                        });
                    });
                }
            },
            components: {
                jsMedia: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.cshtml"))); },
                jsMediaDetail: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.detail.cshtml"))); }
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-calendar-table .el-calendar-day {
        /*height: 25px !important;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-calendar__body {
        padding: 0 !important;
    }

    .el-calendar__header {
        display: none;
    }

    .calendar .el-calendar-table thead th {
        padding: 4px 0;
        height: 25px;
        line-height: 25px;
        background: #F8FDFF;
        border: 1px solid #E6F0F8;
        border-bottom: 0px solid #E6F0F8;
        padding: 5px 0;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #555555;
    }
</style>